<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span class="span-top">
                <span class="seachStatus">
                    {{$t('resconiliationdate')}}
                    <el-date-picker :placeholder="$t('plsset')" v-model="billdate" width="20%" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="mini"></el-date-picker>
                </span>
                <span class="seachCSC">
                    {{$t('processtime')}}
                    <el-date-picker :placeholder="$t('plsset')" v-model="handletime" width="20%" type="daterange" :range-separator="$t('to')" :start-placeholder="$t('startdate')" :end-placeholder="$t('dateclosed')" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="mini"></el-date-picker>
                </span>
            </span>
            <span class="span-bottom">
                <span class="seachCSC">
                    {{$t('errortype')}}
                    <el-select v-model="rcmisttkform.misType" :placeholder="$t('plsset')" size="mini">
                        <el-option :label="$t('alltypes')" :value="-1"></el-option>
                        <el-option :label="$t('platformdrop')" :value="1"></el-option>
                        <el-option :label="$t('chndrop')" :value="2"></el-option>
                        <el-option :label="$t('inconamount')" :value="3"></el-option>
                        <el-option :label="$t('inconstatus')" :value="4"></el-option>
                    </el-select>
                </span>
                <span class="seachXAC">
                    {{$t('processresult')}}
                    <el-select v-model="rcmisttkform.handleResult" :placeholder="$t('plsset')" size="mini">
                        <el-option :label="$t('alltypes')" :value="-1"></el-option>
                        <el-option :label="$t('unprocessed')" :value="0"></el-option>
                        <el-option :label="$t('processed')" :value="1"></el-option>
                    </el-select>
                </span>
            </span>
            <div class="NOUS">
                <el-button type="primary" @click="seach" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
                <el-button type="success" @click="exportExcel" size="mini" v-preventReClick>{{$t('expot')}}</el-button>
            </div>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="rcmisttklist">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="billingDate" :label="$t('resconiliationdate')" min-width="151">
                </el-table-column>
                <el-table-column prop="flowno" :label="$t('platformserialnum')" min-width="163">
                </el-table-column>
                <el-table-column prop="channelCode" :label="$t('chnlnam')" min-width="80">
                </el-table-column>
                <el-table-column prop="mistakeType" :label="$t('errortype')" min-width="97">
                </el-table-column>
                <el-table-column prop="platTradeAmount" :label="$t('platamount')" min-width="134">
                </el-table-column>
                <el-table-column prop="channelTradeAmount" :label="$t('chnlamount')" min-width="139">
                </el-table-column>
                <el-table-column prop="platTradeStatus" :label="$t('platformstate')" min-width="109">
                </el-table-column>
                <el-table-column prop="channelTradeStatus" :label="$t('chnstate')" min-width="115">
                </el-table-column>
                <el-table-column prop="handleStatus" :label="$t('processstate')" min-width="127">
                </el-table-column>
                <el-table-column prop="handleDesc" :label="$t('processremarks')" min-width="146">
                </el-table-column>
                <el-table-column prop="handleTime" :label="$t('processtime')" min-width="128">
                </el-table-column>
                <!-- <el-table-column :label="$t('opratn')" width="110" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="detailssRec(scope.row.settleSerialNo)">{{$t('accountadjust')}}</el-link>
                    </template>
                </el-table-column> -->
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="rcmisttkform.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="rcmisttkform.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {
    getrcmistakelist
} from '@/libs/reqlist.js'
import { getInitDate } from '@/libs/getDate.js'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
    data () {
        return {
            total: 0,
            billdate: null,
            rcmisttkform: {
                billingDate: null,
                handleTimeStart: null,
                handleTimeEnd: null,
                misType: -1,
                handleResult: -1,
                pageSize: 10,
                pageNum: 1
            },
            rcmisttklist: [],
            handletime: []
        }
    },
    methods: {
        seach () {
            if (this.billdate !== null) {
                this.rcmisttkform.billingDate = this.billdate.substring(0, 10).split('-').join('')
            }
            if (!this.billdate) {
              this.rcmisttkform.billingDate = null
              this.billdate = null
            }
            if (this.handletime.length !== 0) {
                this.rcmisttkform.handleTimeStart = this.handletime[0].split('-').join('')
                this.rcmisttkform.handleTimeEnd = this.handletime[1].split('-').join('')
            }
            if (!this.handletime.length === 0) {
              this.rcmisttkform.handleTimeStart = null
              this.rcmisttkform.handleTimeEnd = null
            }
            this.rcmisttkform.pageNum = 1
            this.getRcMistakeList()
        },
        getRcMistakeList () {
            getrcmistakelist(this.rcmisttkform).then(res => {
                if (res.data.code === '000000') {
                    for (let i = 0; i <= res.data.data.list.length - 1; i++) {
                        let item = res.data.data.list[i]
                        if (item.platTradeStatus === 'SUCCESS') item.platTradeStatus = this.$t('succ')
                        if (item.platTradeStatus === 'ERROR') item.platTradeStatus = this.$t('failed')
                        if (item.channelTradeStatus === 'SUCCESS') item.channelTradeStatus = this.$t('succ')
                        if (item.channelTradeStatus === 'ERROR') item.channelTradeStatus = this.$t('failed')
                        if (item.mistakeType === 1) item.mistakeType = this.$t('platformdrop')
                        if (item.mistakeType === 2) item.mistakeType = this.$t('chndrop')
                        if (item.mistakeType === 3) item.mistakeType = this.$t('inconamount')
                        if (item.mistakeType === 4) item.mistakeType = this.$t('inconstatus')
                        if (item.handleStatus === 0) item.handleStatus = this.$t('unprocessed')
                        if (item.handleStatus === 1) item.handleStatus = this.$t('processed')
                        item.billingDate = item.billingDate.slice(0, 4) + '-' + item.billingDate.slice(4, 6) + '-' + item.billingDate.slice(6, 8)
                    }
                    this.rcmisttklist = res.data.data.list
                    this.total = res.data.data.total - 0
                } else {
                    this.$message.error(this.$t('sysexception'))
                }
            })
        },
        handleSizeChange (newSize) {
            this.rcmisttkform.pageSize = newSize
            this.getRcMistakeList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.rcmisttkform.pageNum = newNum
            this.getRcMistakeList()
        },
        exportExcel () {
            /* generate workbook object from table */
            var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
            /* get binary string as output */
            var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
            try {
                FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'sheetjs.xlsx')
            } catch (e) {
                if (typeof console !== 'undefined') console.log(e, wbout)
                }
            return wbout
        }
    },
    mounted () {
        this.rcmisttkform.billingDate = getInitDate(0, 1).split('-').join('')
        this.billdate = getInitDate(0, 1)
        this.getRcMistakeList()
    }
}
</script>

<style lang="less" scoped>
@import './errAccRec.less';
</style>
